<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="yamlRegister"
    @close="drawerReset"
    width="850"
    title="查看YAML"
    :showOkBtn="false"
    cancelText="关闭"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="box-drawer">
      <div class="drawer-refresh" @click="refreshData">
        <a-button type="primary">
          <template #icon>
            <reload-outlined />
          </template>
        </a-button>
      </div>
      <div class="drawer-content">
        <div class="content-header">
          <div class="header-title">当前数据</div>
          <a-radio-group v-model:value="drawerState.radioType">
            <a-radio value="yaml">YAML</a-radio>
            <a-radio value="json">JSON</a-radio>
          </a-radio-group>
        </div>
        <div class="content-code" v-show="drawerState.radioType === 'json'">
          <div class="code-copy" @click="copyTxt">
            <copy-outlined />
          </div>
          <Codemirror
            v-model="drawerState.jsonStr"
            placeholder="Code gose here..."
            :style="{ height: '500px' }"
            :autofocus="true"
            :indent-with-tab="true"
            disabled
            :tabSize="2"
            :extensions="jsonExtensions"
          />
        </div>
        <div class="content-code" v-show="drawerState.radioType === 'yaml'">
          <div class="code-copy" @click="copyTxt">
            <copy-outlined />
          </div>
          <Codemirror
            v-model="drawerState.yamlStr"
            placeholder="Code gose here..."
            :style="{ height: '500px' }"
            :autofocus="true"
            :indent-with-tab="true"
            disabled
            :tabSize="2"
            :extensions="yamlExtensions"
          />
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { ReloadOutlined, CopyOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
import { message } from 'ant-design-vue'
import { Codemirror } from 'vue-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { json } from '@codemirror/lang-json'
import { oneDark } from '@codemirror/theme-one-dark'
import yaml from 'js-yaml'
import useClipboard from 'vue-clipboard3'

import api from '@/api'
const { namespacedYaml, deploymentYaml } = api

const emit = defineEmits(['register'])

const jsonExtensions = [json(), oneDark]
const yamlExtensions = [javascript(), oneDark]
const drawerState = reactive<any>({
  radioType: 'yaml',
  jsonStr: '',
  yamlStr: '',
  type: '',
  record: {}
})

const { toClipboard } = useClipboard()
const [yamlRegister, { closeDrawer, changeLoading }] = useDrawerInner((data) => {
  drawerState.type = data.type
  drawerState.record = cloneDeep(data.record)
  refreshData()
})

async function refreshData() {
  try {
    changeLoading(true)
    let yamlRes = null
    if (drawerState.type === 'namespace') {
      yamlRes = await namespacedYaml({ namespace: drawerState.record?.name })
    } else if (drawerState.type === 'workload') {
      yamlRes = await deploymentYaml({
        name: drawerState.record?.name,
        namespace: drawerState.record?.namespace
      })
    }

    if (yamlRes.result) {
      let jsonStr = yamlRes.result.jsonStr
      drawerState.jsonStr = JSON.stringify(JSON.parse(jsonStr), null, '\t')
      drawerState.yamlStr = yaml.dump(JSON.parse(jsonStr))
    } else {
      drawerState.jsonStr = ''
      drawerState.yamlStr = ''
    }
    changeLoading(false)
  } catch (error) {
    changeLoading(false)
  }
}
// 内容复制
const copyTxt = async () => {
  const copyStr = drawerState.radioType === 'yaml' ? drawerState.yamlStr : drawerState.jsonStr
  await toClipboard(copyStr)
  message.success('复制成功')
}
const drawerReset = () => {
  changeLoading(false)
  drawerState.jsonStr = ''
  drawerState.yamlStr = ''
  drawerState.radioType = 'yaml'
}
</script>

<style lang="less" scoped>
.box-drawer {
  padding: 8px 4px;
  .drawer-refresh {
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-end;
  }
  .drawer-content {
    .content-header {
      padding: 8px 0 8px 16px;
      background-color: #fafafa;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .header-title {
        font-weight: bold;
      }
    }
  }
  .content-code {
    position: relative;
    .code-copy {
      display: none;
      position: absolute;
      right: 20px;
      top: 12px;
      color: #fafafa;
      font-size: 20px;
      z-index: 5;
      cursor: pointer;
    }
    &:hover .code-copy {
      display: block;
    }
  }
}
</style>
